import React, { useEffect, useRef, useState }  from 'react'
import { createPortal } from 'react-dom'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Typography,FloatButton, Form, Button, Input,List,Avatar  } from 'antd'
import { LeftOutlined } from '@ant-design/icons';
import HtmlString from '../../components/html-string'
import './index.css'
import {useDetailData} from "./hooks/useDetailData";
import {useFormData} from "./hooks/useFormData";
import Login from "../../components/login";
import Comment from '../../components/comment'
const { Title,Text } = Typography
const { TextArea  } = Input
const Details = () => {
    const [form] = Form.useForm();
    const navigate = useNavigate()
    const handleToBack = () => {
        navigate('/blog/list')
    }
    const detailRef = useRef(null)
    const commentRef = useRef(null)
    const [ searchParams ] = useSearchParams()
    const [showLogin, setShowLogin] = useState(false)
    const { getDetailData, loading, data } = useDetailData('/news/queryOne')
    const { loading: subLoading, submit } = useFormData(setShowLogin)
    useEffect(() => {
       const id = searchParams.get('id')
       getDetailData({
           newsid: id
       })
    },[])
    const onFinish = formData =>{
        const comment_news_id = searchParams.get('id')
        formData['comment_news_id'] = comment_news_id
        submit(formData)
        form.resetFields();
        commentRef.current && commentRef.current.refreshComment()
    }
    const handleShowOpen = val => {
        setShowLogin(val)
    }
    return (
        <div ref={detailRef} className={"detail-container"}>
            { showLogin && <Login open={showLogin} handleShowOpen={handleShowOpen} /> }
            <div className={"detail-header"}>
                <LeftOutlined onClick={handleToBack} className={"back-icon"} size={20} />
                <span onClick={handleToBack}>返回</span>
            </div>
            <div className={"content"}>
                <Title level={2}>{ data.title }</Title>
                <div className={"info"}>
                    <Text type="warning">{ data.author }</Text>
                    <Text className={"date"}>{ data.publishdate }</Text>
                </div>
                <div className={"text"}>
                    <HtmlString html={data.content} />
                </div>
            </div>

            <div className={ "comment"}>
                <Title level={5}>评论</Title>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{
                        span: 0,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="Username"
                        name="comment_content"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>


                    <Form.Item
                    >
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
                <Comment ref={commentRef} newsId={ searchParams.get('id') } />
            </div>
            <FloatButton.BackTop target={() => detailRef.current} visibilityHeight={200}  />
        </div>
    )
}


export default Details
